<template>
  <div class="header">
    <nav class="container">
      <router-link class="title" to="/">
        <el-icon size="35" color="#ffffff">
          <Sunny />
        </el-icon>
        <span>新中地天气</span>
      </router-link>
      <div class="now">
        <span style="font-size: 1.125rem">{{ IpWeather.city }}</span>
        <span style="font-size: 0.875rem">实时天气：{{ IpWeather.weather }} {{ IpWeather.temperature }}℃</span>
        <span style="font-size: 0.875rem">{{ IpWeather.winddirection }}风{{ IpWeather.windpower }}级</span>
      </div>
      <div class="i">
        <el-icon @click="DialogVisible = true" size="20">
          <InfoFilled />
        </el-icon>
      </div>
    </nav>
    <!-- 提示框 -->
    <el-dialog v-model="DialogVisible" width="330" align-center>
      <div>
        <h2 class="title">关于：</h2>
        <span class="text">这个应用可以用来追踪你选择城市的当前天气</span>
        <h2 class="title">如何使用:</h2>
        <span class="text">
          1.点击搜索框输入你希望追踪的城市 <br>
          2.在搜索结果中选中一个城市，你将获取当地最新的天气 <br>
          3.点击右侧的＋号可以将追踪城市的天气情况保存在首页 <br>
        </span>
        <h2 class="title">移除城市:</h2>
        <span class="text">
          如果你不想在首页关注某个城市,可以通过底部的按钮删除它
        </span>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button color="#00668a" @click="DialogVisible = false">关闭</el-button>
        </div>
      </template>
    </el-dialog>
  </div>

  <div class="main">
    <!-- 配置路由出口 -->
    <RouterView />
  </div>

</template>
<script setup>
import { Sunny, InfoFilled } from '@element-plus/icons-vue'
import { ref, onMounted } from 'vue'
import { getIp, getIpWeather } from '../src/api/weather.js'
const IpWeather = ref({})
const DialogVisible = ref(false)

onMounted(async () => {
  // 获取当前ip
  const res = await getIp()

  // 根据ip获取到的天气信息
  const data = await getIpWeather(res.adcode)
  IpWeather.value = data.lives[0]
  // console.log(IpWeather.value)

})



</script>
<style lang="scss">
@import 'reset-css';

body {
  background-color: #00668a;
}

* {
  box-sizing: border-box;
}

.header {
  color: #ffffff;
  height: 80px;
  width: 100%;
  background-color: #00668a;
  position: fixed;
  top: 0;
  left: 0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  z-index: 9999;

  /* 关键：提升层级 */
  .container {
    display: flex;
    padding: 24px 160px;
    align-items: center;
    gap: 20px;

    .title {
      display: flex;
      align-items: center;
      gap: 10px;
      color: #ffffff;
      font-size: 1.5rem;
      text-decoration: none;
      /* 移除下划线 */
      cursor: pointer;
      /* 保持鼠标指针为手型（可选） */
    }

    // a {
    //   display: flex;
    //   align-items: center;
    //   gap: 10px;
    //   color: #ffffff;
    //   font-size: 1.5rem;
    //   text-decoration: none;
    //   /* 移除下划线 */
    //   cursor: pointer;
    //   /* 保持鼠标指针为手型（可选） */

    // }

    .now {
      display: flex;
      gap: 20px;
      align-items: center;

    }

    .i {
      margin-left: auto;
      /* **关键样式**：这会将 .i 推到最右边 */
      cursor: pointer;
    }
  }

  .el-dialog {



    .title {
      color: #000000;
      font-size: 1.1em;
      font-weight: 400;

    }

    .text {
      color: #000000;
      font-size: .75rem;
      line-height: 1rem;
      display: inline-block;
      margin-bottom: 1rem;
      margin-top: 5px;
    }

    .dialog-footer {
      display: flex;
      justify-content: flex-start;

      .el-button {
        width: 85px; // 增加按钮宽度
        font-size: small;
      }
    }
  }

}

.main {
  margin-top: 80px;
}
</style>